what's the usage look like? something like

<div *ngFor="#foo of foos | async:onError">

?

@robwormald ya

Hey @robwormald & @gdi2290,

It seems a bit strange to me that one would put error handling in the UI.

1. What is the current behavior in case of an error?
2. What is the motivation for this? What would one do with this error other the report it?
3. Could we think of a way to do this in a way which is more component scoped? As it a component could say 'I would like to get all async pipe errors delivered here'

PS: Just trying to get a better feel for the motivation behind thes PR.

Any plans to fix this PR?

Why was this closed?
The async pipe seems useless without a way to handle errors

@stevenjob Observable has .catch() method

doesn't catch require you to return an observable?
In reality you would want to show an error message or something?

An equivalent to .subscribe(_, handleError) is needed?

You can use if/else style syntax:

<ng-template #error>Error!</ng-template>
<div *ngIf="userObservable | async as user; else error">
  {{ user.name }}
</div>

// inside component
userObservable = this.http.get('user').catch(error => Observable.of(false));

(it's only available in ng4+)

Returning an observable of false from a stream that is supposed to return user would break typescript and seems like a smell to me.
Also i imagine the else here would be used to check for loading when the stream has not returned a value yet and would be falsy?

I have seen people use -1 for error value but its not a nice solution.

// inside component would get `Type Observable<bool> is not assignable to Observable<User> ...`
userObservable: Observable<User> = this.http.get('user').catch(error => Observable.of(false));

Since the async pipe is doing the same job as using subscribe it should handle all the same things as subscribe e.g. onNext, onError, onCompleted

To handle all cases:

<ng-template #loading>Loading!</ng-template>
<div *ngIf="userObservable | async:onError:onCompleted as user; else loading">
  {{ user.name }}
</div>

// inside component
userObservable = this.http.get('user');


public onError(error) {
  // do something with error
}

public onCompleted() {
  // do something
}

Returning an observable of false from a stream that is supposed to return user would break typescript and seems like a smell to me.

ok, you can return null/undefined

Since the async pipe is doing the same job as using subscribe it should handle all the same things as subscribe e.g. onNext, onError, onCompleted

if you need all 3 callbacks just subscribe inside a component

So the conclusion is: never use async pipes if you want to handle errors properly, specially if you want to display an error message sent from the server.

A problem with AsyncPipe throwing errors is that it makes them uncatchable in jasmine tests as far as I can tell. If you are testing the error handling then you want the errors to make it to the template, but you don't want those errors to reach jasmine and cause the test to fail with Uncaught error. I had to work around this issue by patch AsyncPipe to not throw errors in my tests.

https://stackoverflow.com/q/52433159/41908

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}